<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>dijit.form.Form Valid/Invalid State Test</title>

		<style type="text/css">
			@import "../../themes/claro/document.css";
			@import "../css/dijitTests.css";
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.form.ValidationTextBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.form.Form");
			dojo.require("dojo.parser");	// scan page for widgets and instantiate them
		</script>
	</head>

	<body class="claro">
		<h1 class="testTitle">dijit.form.Form Valid/Invalid State Test</h1>
		<p>
			Tests that dijit.form.Form correctly changes state from valid to invalid (as indicated by disabled/enabled submit button)
			according to child widget state.
		</p>
		<form id="form1" data-dojo-type="dijit/form/Form" data-dojo-props='action:"", name:"example", method:""'>
			<script type="dojo/connect" data-dojo-event="startup">
				var submitButton = dijit.byId("submitButton");
				//  set initial state
				submitButton.set("disabled", !this.isValid());
				this.connect(this, "onValidStateChange", function(state){
						submitButton.set("disabled", !state);
				});
			</script>
			<table>
				<tr>
					<td><label for="name">Name:</label></td>
					<td><input id="name" data-dojo-type="dijit/form/ValidationTextBox"
						data-dojo-props='required:true, name:"name" '/></td>
				</tr>
				<tr id="newRow" style="display: none;">
					<td><label for="lastName">Last Name:</label></td>
					<td><input id="lastName" /></td>
				</tr>
				<tr>
					<td><label for="birth">Birthdate (before 2006-12-31):</label><br><br><br><br></td>
					<td><div><input id="birth" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='value:"2000-01-01",
						required:true, name:"birth", constraints:{min:"1900-01-01", max:"2006-12-31"} '/> <br>
					<button id="disable" onclick="dijit.byId('birth').set('disabled',true);return false;">Disable</button>
					<button id="enable" onclick="dijit.byId('birth').set('disabled',false);return false;">Enable</button>
					<button id="reset" onclick="dijit.byId('birth').reset();return false">Reset</button> <br><br>
					</div></td>
				</tr>
				<tr>
					<td><label for="notes">Notes (optional)</label></td>
					<td><input id="notes" data-dojo-type="dijit/form/TextBox"
						data-dojo-props='name:"notes" '/></td>
				</tr>
				<tr id="newRow2" style="display: none;">
					<td><label for="color">Favorite Color</label></td>
					<td><select id="color">
						<option value="red">Red</option>
						<option value="yellow">Yellow</option>
						<option value="blue">Blue</option>
					</select></td>
				</tr>
			</table>
			<button id="submitButton" data-dojo-type="dijit/form/Button" >
				<script type="dojo/method" data-dojo-event="onClick">
					console.dir(dijit.byId("form1").get('value'));
				</script>
				Submit
			</button>
			<button id="addMoreFields" data-dojo-type="dijit/form/Button" >
				<script type="dojo/method" data-dojo-event="onClick">
					new dijit.form.FilteringSelect({id: "color",
													name: "color",
													required: true},
													dojo.byId("color"));
					new dijit.form.ValidationTextBox({id: "lastName",
													name: "lastName",
													required: true},
													dojo.byId("lastName"));
					dojo.byId("newRow").style.display = "";
					dojo.byId("newRow2").style.display = "";
					this.set("disabled", true);
					this.domNode.blur();
					// Call this, since we added a new widget - so that our
					// form knows that we have something else to watch.
					dijit.byId("form1").connectChildren();
				</script>
				Add More Fields
			</button>
			<button data-dojo-type="dijit/form/Button">
				<script type="dojo/method" data-dojo-event="onClick">
					dijit.byId("name").validate();
				</script>
				validate
			</button>
		</form>
	</body>
</html>
